<script setup lang="ts" name="App">
import { useSettingStore } from '@/store/modules/setting';
import useRouteCache from '@/hooks/useRouteCache';
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.add('light');
}

const settingStore = useSettingStore();
const { showSidebarState } = storeToRefs(settingStore);

const { caches, collectCaches } = useRouteCache();
collectCaches();

const route = useRoute();
const isShow = computed(() => {
  return !['/todo'].includes(route.path);
});
</script>

<template>
  <div w="full" h="full" class="relative app-container">
    <van-popup
      v-model:show="showSidebarState"
      position="left"
      :overlay-style="{
        backgroundColor: 'rgba(0,0,0, 0.4)',
      }"
      :style="{ width: '145px', height: '100%' }"
    >
      <sidebar class="-enter-y" />
    </van-popup>
    <sidebar class="<sm:hidden -enter-x" />
    <div
      class="block fixed right-4 bottom-4 enter-y sm:hidden"
      @click="settingStore.changeSidebarState(true)"
    >
      <van-icon name="more-o" size="30" color="#bbb" />
    </div>

    <div
      w="full"
      p="l-0"
      sm="pl-38  pt-6"
      md="pl-50"
      lg="pl-55"
      xl="pl-60"
      class="right-container"
      id="app-main-scroller"
    >
      <router-view v-slot="{ Component }">
        <transition name="scale-slide" class="enter-x" mode="out-in">
          <main>
            <span v-if="isShow"> 缓存组件： {{ caches }} </span>

            <keep-alive :include="caches">
              <component :is="Component" />
            </keep-alive>
          </main>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style>
@font-face {
  font-family: 'iconfont';
  src: url('/static/fonts/iconfont.woff2?t=1670574891845') format('woff2'),
    url('/static/fonts/iconfont.woff?t=1670574891845') format('woff'),
    url('/static/fonts/iconfont.ttf?t=1670574891845') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn {
  @apply w-full h-12 flex mb-3 items-center justify-center text-gray-200 bg-gray-700 text-base rounded-md dark: bg-gray-800;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

html,
body,
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.right-container {
  flex: 1;
  background-color: #f5f7fa;
}
</style>
